<!DOCTYPE html><!--订单页面-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>订单</title>
    <meta charset="UTF-8"/>
    <!--js-->
    <script src="/static/js/jquery-1.8.2.min.js"></script>
    <script src="/static/js/common.js"></script>
    <script src="/static/js/jquery.easing.1.3.js"></script>
    <script src="/static/js/ddsmoothmenu.js"></script>
    <script src="/static/js/jquery.flexslider.js"></script>
    <script src="/static/js/jquery.elastislide.js"></script>
    <script src="/static/js/jquery.jcarousel.min.js"></script>
    <script src="/static/js/jquery.accordion.js"></script>
    <script src="/static/js/light_box.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".inline").colorbox({
                inline: true,
                width: "50%"
            });
        });
    </script>
    <!--end js-->

    <!-- Mobile Specific Metas ================================================== -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS ================================================== -->

    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/orange.css">
    <link rel="stylesheet" href="/static/css/skeleton.css">
    <link rel="stylesheet" href="/static/css/layout.css">
    <link rel="stylesheet" href="/static/css/ddsmoothmenu.css"/>
    <link rel="stylesheet" href="/static/css/elastislide.css"/>
    <link rel="stylesheet" href="/static/css/home_flexslider.css"/>

    <link rel="stylesheet" href="/static/css/light_box.css"/>
    <script src="/static/js/html5.js"></script>

    <link rel="stylesheet" href="/static/css/tasp.css"/>
    <link href="/static/css/orderconfirm.css" rel="stylesheet"/>
    <script src="/static/layer/layer.js"></script>
    <script src="/static/layui/layui.js"></script>

    <style>
        #page {
            width: auto;
        }

        #comm-header-inner, #content {
            width: 950px;
            margin: auto;
        }

        #logo {
            padding-top: 26px;
            padding-bottom: 12px;
        }

        #header .wrap-box {
            margin-top: -67px;
        }

        #logo .logo {
            position: relative;
            overflow: hidden;
            display: inline-block;
            width: 140px;
            height: 35px;
            font-size: 35px;
            line-height: 35px;
            color: #f40;
        }

        #logo .logo .i {
            position: absolute;
            width: 140px;
            height: 35px;
            top: 0;
            left: 0;
            background: url(http://a.tbcdn.cn/tbsp/img/header/logo.png);
        }
    </style>
</head>
<body>
<div th:replace="common/HeaderBlock::block"></div>
<div id="content" class="grid-c">
    <form id="J_Form" name="J_Form" action="" method="post">
        <div>
            <h3 class="dib">确认订单信息</h3><span style="color:red;" id="log"></span>
            <table cellspacing="10" cellpadding="10" class="order-table"
                   id="J_OrderTable" summary="统一下单订单信息区域">
                <caption style="display: none">统一下单订单信息区域</caption>
                <thead>
                <tr>
                    <th class="s-title">店铺宝贝
                        <hr/>
                    </th>
                    <th class="s-price">单价(元)
                        <hr/>
                    </th>
                    <th class="s-amount">数量
                        <hr/>
                    </th>
                    <th class="s-total">小计(元)
                        <hr/>
                    </th>
                </tr>
                </thead>
                <tbody id="tBody1" style="text-align: center;">

                </tbody>
                <tfoot>
                <tr>
                    <td colspan="5">
                        <div class="order-go" data-spm="4">
                            <div class="J_AddressConfirm address-confirm">
                                <div class="kd-popup pop-back" style="margin-bottom: 40px;width: 120px">
                                    <div class="box">
                                        <div class="bd">
                                            <div class="point-in">
                                                <em class="t">实付款：</em> <span class='price g_price '>
																<span>&yen;</span><em class="style-large-bold-red"
                                                                                      id="J_ActualFee"></em>
															</span>
                                            </div>

                                        </div>
                                    </div>
                                    <a href="cart" class="back J_MakePoint" target="_top"
                                       data-point-url="">返回购物车</a>
                                    <div>
                                        <button style="width: 100%;height: 30px" type="button" onclick="delOrder()"
                                                id="del">
                                            撤销订单
                                        </button>
                                    </div>
                                    <button type="button" style="width: 50%;height: 30px;float: right" id="make2"
                                            onclick="makeOrder(2)">微信结算
                                    </button>
                                    <button type="button" style="width: 50%;height: 30px;float: left" id="make1"
                                            onclick="makeOrder(1)">支付宝结算
                                    </button>
                                </div>
                            </div>

                            <div class="J_confirmError confirm-error">
                                <div class="msg J_shopPointError" style="display: none;">
                                    <p class="error">积分点数必须为大于0的整数</p>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </form>
    <div>
        <h3 class="dib">已支付订单</h3><span style="color:red;" id="log1"></span>
        <table cellspacing="10" cellpadding="10" class="order-table"
               id="J_OrderTable1" summary="统一下单订单信息区域">
            <caption style="display: none">统一下单订单信息区域</caption>
            <thead>
            <tr>
                <th>时间
                    <hr/>
                </th>
                <th>总价(元)
                    <hr/>
                </th>
                <th>支付方式
                    <hr/>
                </th>
                <th>订单编号
                    <hr/>
                </th>
            </tr>
            </thead>
            <tbody id="tBody2" style="text-align: center;">

            </tbody>
            <tfoot>
            </tfoot>
        </table>
    </div>
</div>
<div th:replace="common/footer::footer"></div>
</body>
<script>
    //填充订单表格
    function selOrder() {
        //未支付订单
        $.ajax({
            type: 'GET',
            url: 'order/selOrder',
            success: function (result) {
                const tBody = $('#tBody1');
                const total = $('#J_ActualFee');
                tBody.empty();
                total.empty();
                if (result.status === 1) {
                    const arr = result.data.orderItemList;

                    for (let i = 0; i < arr.length; i++) {
                        const tr = $('<tr></tr>');
                        tr.append("<td>" + arr[i].productName + "</td>");
                        tr.append("<td>" + arr[i].currentUnitPrice + "</td>");
                        tr.append("<td>" + arr[i].quantity + "</td>");
                        tr.append("<td>" + arr[i].totalPrice + "</td>");
                        tBody.append(tr);
                    }
                    total.text(result.data.payment);
                } else {
                    $('#log').text(result.msg);
                    $('#del').attr('disabled', true);
                    $('#make1').attr('disabled', true);
                    $('#make2').attr('disabled', true);
                }
            }
        });
        //已经完成订单
        $.ajax({
            type: 'GET',
            url: 'order/paidOrder',
            success: function (result) {
                const data = result.data;
                const ta = $('#tBody2');
                ta.empty();
                for (let i = 0; i < data.length; i++) {
                    const tr = $('<tr></tr>');
                    tr.append('<td>'+ data[i].updateTime +'</td>');
                    $.ajax({
                        type:'GET',
                        async:false,
                        url:'order/selOrderByOrderId',
                        data:{
                            'orderNo':data[i].orderNo
                        },
                        success:function (result) {
                            const data1 = result.data;
                            tr.append('<td>'+ result.data[0].payment +'</td>');
                        }
                    });
                    if(data[i].payPlatform===1){
                        tr.append('<td>支付宝</td>');
                    }else {
                        tr.append('<td>微信</td>');
                    }
                    tr.append('<td>'+ data[i].orderNo +'</td>');
                    ta.append(tr);
                }
            }
        })
    }

    selOrder();

    //撤销订单
    function delOrder() {
        layer.confirm('是否确认撤销订单', function () {
            $.ajax({
                type: 'GET',
                url: 'order/delOrder',
                success: function () {
                    window.location.reload();
                }
            })
        })
    }

    //支付订单
    function makeOrder(way) {
        layer.confirm('确认支付？', function () {
            $.ajax({
                type: 'GET',
                url: 'order/makeOrder',
                data: {
                    'way': way
                },
                success: function () {
                    layer.msg('支付成功！！！', {time: 1500, icon: 6});
                    selOrder();
                }
            })
        })
    }


</script>
<!--类别窗口-->
<script>
    const ulBody = $('#ulBody');
    //先找到根类别
    $.ajax({
        type: 'GET',
        url: 'cate/listCate',
        async: false,
        success: function (result) {
            const data = result.data;//根分类
            for (let i = 0; i < data.length; i++) {
                const li1 = $('<li><a>' + data[i].name + '</a></li>');
                const ul1 = $('<ul></ul>');
                //由根分类id查找二级分类
                $.ajax({
                    type: 'GET',
                    url: 'cate/moreCate',
                    async: false,
                    data: {
                        'id': data[i].id
                    },
                    success: function (result1) {
                        const data1 = result1.data;//二级分类
                        for (let j = 0; j < data1.length; j++) {
                            ul1.append("<li><a href='product?id=" + data1[j].id + "'>" + data1[j].name + "</a></li>")
                        }
                    }
                });
                li1.append(ul1);
                ulBody.append(li1);
            }
        }
    });
</script>
</html>